import React, { useCallback, useMemo } from "react";
import ButtonAtom from "../../Atoms/Button.Atom";
import ButtonAtomEnum from "../../Atoms/Button.Atom/enum";

interface ButtonMoleculeProps {
  items?: any;
  onClick?: (title: string) => void;
  selected?: any;
}

const ButtonMolecule: React.FC<ButtonMoleculeProps> = (props) => {
  const { items, onClick, selected } = props;

  const renderButtonMolecule = useCallback(
    (items: any) => {
      return items?.map((e: any) => (
        <ButtonAtom
          key={e.id}
          type={ButtonAtomEnum.enum_butButton}
          onClick={() => onClick && onClick(e.title)}
          //  active={selectedCategory === e.title}
        >
          {e.title}
        </ButtonAtom>
      ));
    },
    [onClick]
  );

  const memoizedButtonMolecule = useMemo(
    () => renderButtonMolecule(items),
    [items, renderButtonMolecule]
  );

  return <>{memoizedButtonMolecule}</>;
};
export default React.memo(ButtonMolecule);
